
import { CaretRightOutlined } from "@ant-design/icons";
import { Button, Form, Space, Input, Select ,Modal} from "antd";
import useCompleteTask from '@/hooks/CompleteTaskLogic.jsx'

const { TextArea } = Input;

const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

function CompleteTask(props) {
  
  const onClose = props.onClose ? props.onClose : () => {};
 
  const {
    form,
    completeTask
  } = useCompleteTask(props);
 

  return (
    <div>
      <div style={{ background: "#eee", borderRadius: 5, paddingTop: 16 }}>
        <Form {...layout} form={form} style={{ width: 700 }}>
        <Form.Item
            name="taskId"
            label="Task ID"
            
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="operator"
            label="Operator"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="processVar"
            label="Process Variable"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <TextArea
              showCount
              style={{ height: 220 }}
              placeholder="can resize"
            />
          </Form.Item>
        </Form>
      </div>
      <div style={{ textAlign: "right" }}>
        <Space>
          <Button type="primary" onClick={completeTask}>
            Complete Task
          </Button>
          <Button onClick={onClose}>Cancel</Button>
        </Space>
      </div>
    </div>
  );
}

export default CompleteTask;
